<template>
  <div class="info1">
    <div class="electro-charts">
      <div ref="alarmStatistics" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";
import api from "../../api/api";
var datas = [[]];
var alarmStatisticsOption = {
  title: {
    text: "",
    left: "center",
    textStyle: {
      color: "#999",
      fontWeight: "normal",
      fontSize: 14,
    },
  },
  grid: {
    left: "5%",
    right: "5%",
    bottom: "5%",
    top: "5%",
    containLabel: true,
  },
  series: datas.map(function (data, idx) {
    var top = idx * 33.3;
    return {
      type: "pie",
      radius: ["40%", "70%"],
      top: top + "%",
      itemStyle: {
        borderColor: "#02223b",
        borderWidth: 2,
        color: function (params) {
          let colorList1 = [
            "#0E6DE9",
            "#AC4ED3",
            "#E6AF08",
            "#B2B5B2",
            "#00AF6D",
            "#089186",
          ];
          let colorList2 = [
            "rgba(251,46,46,0.6000)",
            "rgba(3,214,57,0.6000)",
            "rgba(252,182,45,0.6000)",
            "rgba(251,82,74,0.6000)",
            "rgba(224,244,0,0.6000)",
            "rgba(245,54,162,0.6000)",
          ];
          let color1 = colorList1[params.dataIndex];
          //   let color2 = colorList2[params.dataIndex];
          if (!color1) {
            color1 = params.dataIndex % 2 == 0 ? colorList1[0] : colorList1[1];
            // color2 = params.dataIndex % 2 == 0 ? colorList2[0] : colorList2[1];
          }
          return color1;
        },
      },
      label: {
        alignTo: "edge",
        formatter: "{name|{b}{c}\n}",
        minMargin: 5,
        edgeDistance: 10,
        color: "#fff",
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: "#999",
          },
        },
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80,
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points,
        };
      },
      data: data,
    };
  }),
};

export default {
  setup(props, conts) {
    const alarmStatistics = ref(null);
    const energdetail = ref(conts.attrs.pseudoData);
    onMounted(async () => {
      let baralarmStatistics = echarts.init(alarmStatistics.value);
      if (energdetail.value && energdetail.value.pseudoData) {
        if (typeof energdetail.value.pseudoData == "string") {
          energdetail.value.pseudoData = JSON.parse(
            energdetail.value.pseudoData
          );
        }
        alarmStatisticsOption.series[0].data = [
          {
            name: "漏电告警：",
            value: energdetail.value.pseudoData.alarm_leakage,
          },
          {
            name: "电压欠压：",
            value: energdetail.value.pseudoData.alarm_undervoltage,
          },
          {
            name: "电流过载：",
            value: energdetail.value.pseudoData.alarm_overload,
          },
          {
            name: "电压过压：",
            value: energdetail.value.pseudoData.alarm_overvoltage,
          },
          {
            name: "温度告警：",
            value: energdetail.value.pseudoData.alarm_temperature,
          },
          { name: "断电：", value: energdetail.value.pseudoData.alarm_outage },
        ];
      }
      baralarmStatistics.setOption(alarmStatisticsOption);
      baralarmStatistics.currentIndex = -1;
      setInterval(function () {
        var dataLen = alarmStatisticsOption.series[0].data.length;
        // 取消之前高亮的图形
        baralarmStatistics.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: baralarmStatistics.currentIndex,
        });
        baralarmStatistics.currentIndex =
          (baralarmStatistics.currentIndex + 1) % dataLen;
        // 高亮当前图形
        baralarmStatistics.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: baralarmStatistics.currentIndex,
        });
      }, 1000);
      window.addEventListener("resize", function () {
        //自适应大小, 不用的话不会自适应大小。
        baralarmStatistics.resize();
      });
    });
    return {
      alarmStatistics,
    };
  },
};
</script>
<style>
@import "../../assets/css/geoMap.css";
.info1 {
  background: url(../../assets/img/model_backg.png) no-repeat;
  background-size: 100% 100%;
  height: calc(100% - 30px);
  /* height: 100%; */
}
.electro-charts {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>